<template>
  <div>
    <div class="head">
      <img :src="'back.png' | imagePath" />
      <p>选择地址</p>
      <span></span>
    </div>
    <div class="address">
      <div class="address-search">
        <img :src="'searchIcon.png' | imagePath" />
        <input type="text" placeholder="请输入地址关键词">
      </div>
      <div class="address-current">
        <span>当前定位</span>
        <p>华徐公路888号</p>
        <em><img :src="'addressIcon.png' | imagePath"/>重新定位</em>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{}
    }
  }
</script>
<style>
  .address{
    background-color: #FFFFFF;
    overflow: hidden;
  }
  .address-search{
    background-color: #f5f5f5;
    border-radius: 0.53rem;
    width: 9.2rem;
    height: 1.06rem;
    margin: 0.26rem auto;
    display: flex;
    align-items: center;
  }
  .address-search img{
    display: block;
    margin: 0 0.44rem;
    width: 0.37rem;
    height: 0.37rem;
  }
  .address-search input{
    background-color: #F5F5F5;
  }
  .address-current{
    display: flex;
    padding: 0 0.4rem;
    height: 1.33rem;
    align-items: center;
  }
  .address-current span{
    color: #999999;
    font-size: 0.32rem;
  }
  .address-current p{
    flex: 1;
    font-size: 0.37rem;
    color: #333333;
    margin-left: 0.4rem;
  }
  .address-current em{
    color: #6DC5C6;
    font-size: 0.32rem;
    display: flex;
    align-items: center;
  }
  .address-current em img{
    display: block;
    width: 0.32rem;
    height: 0.4rem;
    margin-right: 0.12rem;
  }
</style>
